<script  setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { listApprovalByReportId,deleteApproval,updateApproval } from '@/api/approval'


const router = useRouter()
const formData = ref({
  pageNum: 1,
  pageSize:10,
  size:10
})
// 表单状态
const filterState = ref(true)
const tableData=ref([])// 必须为数组类型

const store = useUserStore()
onMounted(()=>{
  loadData()
})


const loadData = async () =>{
//  let r = await listApprovalByReportId(formData.value)

 let r = await listApprovalByReportId({
  userId:store.user.id,
  type:formData.value.type
 })
  console.log("r",r)
//  tableData.value = r.data.list
//  tableData.total = r.data.total
  tableData.value = r.data.list
}

const onDelete = async (row)=>{
  if(row.state==0){
    let r = await deleteApproval(row.id)
    if(r.code==200){
      ElMessage.success("删除成功")
      loadData()
    }else{
      ElMessage.error("删除失败")
    }
  }else{
    ElMessage.error("已开始审批流程不可删除")
  }
  
}

const onUpdate =(row)=>{
  if(row.state==0){
  router.push({path:'/approval/apply',
                          query:{
                            types:'update',
                            applyId:row.id
                          },
                        })
                      }else{
                        ElMessage.error("已开始审批流程不可修改")
                      }
}


const search = async () =>{
  loadData()
}

const resetSearch = ()=>{
  loadData()
}

///
const onSizeChange =(val)=>{
  formData.value.size = val
  formData.value.pageSize = val
  loadData()
}
///
const onCurrentChange =(val)=>{
  formData.value.pageNum = val
  loadData()
}

</script>

<template>
  <Box>
    <!-- 逻辑层 -->
    <Info ref="infoRef"   @flush="loadData"/>
    <!-- <AssignRole ref="assignRoleRef" /> -->
    <!-- 逻辑层 -->

    <!-- 筛选 -->
    <template #filter v-if="filterState">
      <el-form :inline="true"  >
        <el-form-item label="申请类型" style="width: 400px;">
          <el-select v-model="formData.type" placeholder="请选择申请类型">
            <el-option
              v-for="item in [
                { label: '补卡', value: 1 },
                { label: '事假', value: 2 },
                { label: '年休', value: 3 }
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search"> <span class="iconfont icon-sousuo" ></span>搜索 </el-button>
          <el-button type="default" @click="resetSearch"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </template>
    <!-- 筛选 -->
    <!-- 内容 -->
    <!-- 按钮组 -->
    <el-row>
      <el-col :span="12">
        <el-button type="primary" @click="router.push('/approval/apply')">
          <span ></span>新增
        </el-button>
      </el-col>

      <el-col :span="12" style="text-align: right">
        <el-button circle @click="filterState = !filterState">
          <span class="iconfont icon-sousuo"></span>
        </el-button>
        <el-button circle  @click="loadData">
          <span class="iconfont icon-shuaxin"></span>
        </el-button>
      </el-col>
    </el-row>
    <!-- 按钮组 -->
    <!-- 表格 -->
    <el-table :data="tableData" :border="true" >

      <el-table-column label="序号" prop="id" align="center" width="120">
        <template #default="scoped">
          <span>{{ (formData.pageNum-1)*formData.pageSize+ scoped.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名" prop="reporterName" align="center" ></el-table-column>
      <!-- <el-table-column label="部门" prop="reporterDeptId" align="center" width="160"></el-table-column> -->

      
      <el-table-column label="申请开始时间" prop="startTime" align="center" width="200"></el-table-column>
      <el-table-column label="申请结束时间" prop="endTime" align="center" width="200"></el-table-column>
      <el-table-column label="请假时长(小时)" prop="approvalTime" align="center" width="200"></el-table-column>
      <el-table-column label="申请类型" prop="type" align="center" width="200">
        <template #default="scope">
          <el-tag v-if="scope.row.type == 1" type="success">补卡</el-tag>
          <el-tag v-if="scope.row.type == 2" type="info">事假</el-tag>
          <el-tag v-if="scope.row.type == 3" type="info">年休</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="相关文件" prop="approvalFile" align="center" width="160"></el-table-column> 
      <el-table-column label="状态" prop="state" align="center" width="200">
        <template #default="scope">
          <el-tag v-if="scope.row.state == 0" type="info">等待部门领导审批</el-tag>
          <el-tag v-if="scope.row.state == 1" type="info">等待人事审批</el-tag>
          <el-tag v-if="scope.row.state == 2" type="info">等待领导审批</el-tag>
          <el-tag v-if="scope.row.state == 3" type="success">审批通过</el-tag>
          <el-tag v-if="scope.row.state == 5" type="error">审批不通过</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="120" fixed="right">
        <template #default="scoped">
          <el-button type="primary" link size="small" @click="onUpdate(scoped.row)">
            <span class="iconfont icon-bianji"></span>修改
          </el-button>
          <el-button type="primary" link size="small" @click="onDelete(scoped.row)">
            <span class="iconfont icon-shanchu"></span>删除
          </el-button>
          <!-- <el-button type="primary" link size="small" @click="onAssignRole(scoped.row)">
            <span class="iconfont icon-gengduo"></span>
            分配角色
          </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
        <el-pagination
          v-model:current-page="formData.pageNum"
          v-model:page-size="formData.pageSize"
          :page-sizes="[10, 20, 30, 40]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
    <!-- 分页 -->
    <!-- 内容 -->
  </Box>
</template>
